/**
 * 活动菜单 活动详情页面
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Activity/activityApp' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的工作</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 个人详情信息 -->
    <div class="personaldetails">
        <div class="personaldetails_text">
            <div class="personaldetails_text_detail">
                <el-avatar shape="circle" :size="200"  :src="activityDetail.image"></el-avatar>
            </div>
            <div class="personaldetails_text_detail">活动序号：
                <span>{{activityDetail.id}}</span>
            </div>
            <div class="personaldetails_text_detail">活动名称：
                <span>{{activityDetail.name}}</span>
            </div>
            <div class="personaldetails_text_detail">参与人数限制：
                <span>{{activityDetail.capacity}}</span>
            </div>
            <div class="personaldetails_text_detail">开始时间：
                <span>{{activityDetail.begin_time}}</span>
            </div>
            <div class="personaldetails_text_detail">结束时间：
                <span>{{activityDetail.end_time}}</span>
            </div>
            <div class="personaldetails_text_detail">申请开始时间：
                <span>{{activityDetail.apply_begin_time}}</span>
            </div>
            <div class="personaldetails_text_detail">申请结束时间：
                <span>{{activityDetail.apply_end_time}}</span>
            </div>
            <div class="personaldetails_text_detail jump" @click="jump(activityDetail.originator)">发起人：
              <span>{{activityDetail.originator}}</span>
          </div>
          
          <div class="personaldetails_text_detail">收费方式：
              <span>{{activityDetail.charge}}</span>
          </div>
          <div class="personaldetails_text_detail">具体收费量：
              <span>{{activityDetail.charge_detail}}</span>
          </div>
          <div class="personaldetails_text_detail">父创意：
              <span>{{activityDetail.father}}</span>
          </div>
          <div class="personaldetails_text_detail">是否需要申请：
              <span>{{activityDetail.need_apply}}</span>
          </div>
          <div class="personaldetails_text_detail">自动回复信息：
              <span>{{activityDetail.auto_return}}</span>
          </div>
          <div class="personaldetails_text_detail">已完成发布：
              <span>{{activityDetail.finished}}</span>
          </div>
          <el-button size="mini"  type="success" @click="acceptActivity()">同意</el-button>
          <el-button size="mini" type="danger" @click="refuseActivity()">拒绝</el-button>
        </div>
        <tags :activityI="para"></tags>
        <div class="personaldetails_text">
            <div class="personaldetails_text_detail">简介：
                <span v-html="activityDetail.introduction"></span>
            </div>

        </div>
    </div>
  </div>
</template>

<script>
import {actGetWork,actWorkNow,actApplyRes} from "../../api/basisMG"
import marked from 'marked'
import tags from "../../components/tags"
export default {
  data() {
    return {
      para:{
        actID:1
      },
      agreement:{
        actID:16,
        result:"Pass",
        reason:"恭喜，您的活动已通过审核"
      },
      disagreement:{
        actID:16,
        result:"Reject",
        reason:"您的活动未通过审核"
      },
      activityDetail:{
          id:2,
          name:"coding_ni",
          capacity:10,
          locate:"杭州",
          locate_name:"杭州西湖",
          begin_time:"2020-10-1",
          end_time:"2020-10-7",
          apply_begin_time:"2020-10-1",
          apply_end_time:"2020-10-7",
          introduction:"第一次活动",
          originator:"李想",
          charge:"提前收费",
          charge_detail:"￥100",
          father:0,
          need_apply:true,
          auto_return:null,
          finished:1,
          tag:[],
          ParticipantsList:[
              {

              },
              {
                  
              }
          ]

      }
    }
  },
  // 注册组件
  components: {
    tags
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.para.actID = this.$route.query.activityId;
    console.log(this.para)
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata(parameter) {
      this.loading = true
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
       actGetWork(this.para)
        .then(res => {
        actWorkNow()
          .then(res=>{
            this.activityDetail = res.data
            this.activityDetail.introduction = marked(this.activityDetail.introduction || '', {sanitize: true})
          })
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },
    refuseActivity(){
      this.$confirm('是否确认拒绝该活动','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(res =>{

        this.disagreement.actID = this.activityDetail.id;
        actApplyRes(this.disagreement)
        .then(res=>{
          console.log(res);
        })
        this.$message({
          type:'success',
          message:'拒绝了该活动'
        });
      }).catch(() =>{
        this.$message({
          type:'info',
          message:'已取消拒绝该活动'
        })
      })
    },
    acceptActivity(){
      this.$confirm('是否确认接受该活动','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() =>{
        this.agreement.actID = this.activityDetail.id;
        actApplyRes(this.agreement)
        .then(res=>{
          console.log(res);
          this.jump()
        })
        this.$message({
          type:'success',
          message:'接受了该活动'
        });
        
        this.$router.push({path:"/Acticity/activityDetail"})
      }).catch(() =>{
        this.$message({
          type:'info',
          message:'已取消接受该活动'
        })
      })
    },
    jump(userid){
        this.$router.push({path:"/Activity/activityApp"})
    },
    jumpUser(userid){
        this.$router.push({path:"/User/userDetail",query:{userId:userid}})
    },
  }
}
</script>

<style scoped>
.personaldetails{
    display: flex;
    float: left;
    width: 100%;
}
.personaldetails_text{
    width: 40%;
    margin-left: 10%;
}
.personaldetails_text_detail{
    margin-top: 5%;
}
.jump{
    color: red;
  } 
</style>

 